<template>
    <div>
        <el-dialog
            :title="$t('inventoryManage.statisticsRange')"
            :visible="visibleInfo"
            class="el-dialog-lg"
            @close="()=>{$store.commit('setVisibleInfo',false)}">
            <el-checkbox v-model="checked" @change='changeChecked'>{{$t('site.Default.Site')}}</el-checkbox>
            <baseTable v-loading="loading" row-key='SN' :data="dataRows" border  stripe :column='column' :current="current" :size="size">
                <template #yieldValid="{data}">
                    <el-switch
                        v-model="data.yieldValid"
                        :active-value=1
                        :inactive-value=0
                        @change="changeStatus(data.yieldValid,data.SN)">
                    </el-switch>
                </template>
            </baseTable>
            <div class="clearfix">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="current"
                    :page-sizes="[10, 20]"
                    :page-size="size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import baseTable from '../../components/common/baseTable'
export default {
    components:{
        baseTable
    },
    props: {
        siteId:'',
        scopeData:{
            type:Object,
        }
    },
    data() {
        return {
            checked:true,
            loading:false,
            dataRows:[],
            column:[{
                title: this.$t('alarm.alarmEquipment.inverterSn'),
                value: 'SN',
            },{
                title: this.$t('devWifi.wifiSN'),
                value: 'wifiSN'
            }
            ,{
                title: this.$t('device.range.headTitle2'),
                value: 'yieldValid',
                slot: 'yieldValid'
            }
            ],
            size:10,
            current:1,
            total:1
        };
    },
    computed: {
        visibleInfo(){
            return this.$store.state.sysStore.visibleInfo
        }
    },
    watch:{
        siteId:{
            handler(nv,ov){
                this.siteId=this.siteId
                this.initInfoTable()
            }
        },
        scopeData:{
            handler(nv,ov){
                if(nv){
                    this.checked = nv.showFirst ? true:false
                }
            },
            deep:true
        }
    },
    methods: {
        async changeChecked(){
            let res = await this.API.siteShowAsFirst({
                siteId:this.scopeData.ids,
                userId:this.scopeData.userIds,
            })
            if(this.comm.showMsg(res.success)){
                this.$emit('uploadPage',true)
            }
        },
        async initInfoTable(){
            if(this.siteId){
                this.loading = true
                let res = await this.API.editYieldValid({
                    id:this.siteId,
                    size: this.size,
                    current: this.current
                })
                this.total = res.total
                this.dataRows = res.rows || []
                this.loading = false
            }
        },
        handleSizeChange(val) {
          this.size = val
          this.current = 1
          this.initInfoTable()
        },
        handleCurrentChange(val) {
          this.current = val
          this.initInfoTable()
        },
        async changeStatus(yieldValid,sn){
            console.log(yieldValid)
            console.log(sn)
            let res = await this.API.setStatistics({
                yieldValid:yieldValid,
                SN: sn,
            })
            if(res.success){
                this.$message.success(this.$t('index.control_success'));
            }else{
                this.$message.error(this.$t('index.control_fail'));
            }
        }
    }
};
</script>

<style  lang="less">
</style>
